<template>
	<div class="login-container">
		<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
			<div class="title-container">
				<h3 class="title">槑的说采购后台管理</h3>
				<lang-select class="set-language" />
			</div>

			<el-form-item prop="mobile">
				<span class="svg-container">
          <svg-icon icon-class="user" />
        </span>
				<el-input v-model="loginForm.mobile" :placeholder="$t('login.mobile')" name="mobile" type="text" auto-complete="on" />
			</el-form-item>

			<el-form-item prop="password">
				<span class="svg-container">
          <svg-icon icon-class="password" />
        </span>
				<el-input v-model="loginForm.password" :type="passwordType" :placeholder="$t('login.password')" name="password" auto-complete="on" @keyup.enter.native="handleLogin" />
				<span class="show-pwd" @click="showPwd">
          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
        </span>
			</el-form-item>

			<!--<el-form-item prop="verifycode">-->
				<!-- 注意：prop与input绑定的值一定要一致，否则验证规则中的value会报undefined，因为value即为绑定的input输入值 -->
				<!--<el-input v-model="loginForm.verifycode" placeholder="请输入验证码" class="identifyinput"></el-input>
			</el-form-item>
			<el-form-item>
				<div class="identifybox">
					<div @click="refreshCode">
						<s-identify :identifyCode="identifyCode"></s-identify>
					</div>
					<el-button @click="refreshCode" type='text' class="textbtn">看不清，换一张</el-button>
				</div>
			</el-form-item>-->
			<!--<div>
				<el-checkbox v-model="checked" checked class="rememberpassword">记住密码</el-checkbox>
				<el-button class="thirdparty-button" type="primary" @click="showDialog=true" size="mini">
					重置密码
				</el-button>
			</div>
	-->
			<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:50px;margin-top:30px;" @click.native.prevent="handleLogin">
				{{ $t('login.logIn') }}
			</el-button>

			<div style="position:relative">
				<!--<div class="tips">
					<span>{{ $t('login.mobile') }} : admin</span>
					<span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
				</div>
				<div class="tips">
					<span style="margin-right:18px;">
            {{ $t('login.mobile') }} : editor
          </span>
					<span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
				</div>-->
				
				<div class="showbox">
					<el-dialog title="信盈财通密码重置" :visible.sync="showDialog">
					<el-form :model="ruleForm" :rules="rules" ref="ruleFormRef">
						<el-form-item prop="phonenumber">
							<el-input  v-model="ruleForm.phonenumber" placeholder="手机号码" auto-complete="off" ></el-input>
							<el-button type="primary" >验证码</el-button>
						</el-form-item>
						<el-form-item  prop="yzm">
							<el-input v-model="ruleForm.yzm" placeholder="验证码" auto-complete="off" style="margin-left:-85px;"></el-input>
						</el-form-item>
					</el-form>
					<div>
						<el-button type="primary"  @click="showDialognext=true">下一步</el-button>
					</div>
				</el-dialog>
				</div>
					
				<div class="showbox">
					<el-dialog title="信盈财通密码重置" :visible.sync="showDialognext">
					<el-form :model="rulenextForm" :rules="rules" ref="rulenextFormRef">
						<el-form-item prop="pass">
							<el-input  v-model="rulenextForm.pass" placeholder="输入旧密码" type="password" auto-complete="off"></el-input>
						</el-form-item>
						<el-form-item  prop="newpass">
							<el-input v-model="rulenextForm.newpass" placeholder="新密码（4位以上）" id="newkey" type="password" auto-complete="off"></el-input>
						</el-form-item>
						<el-form-item prop="checknewpass">
							<el-input v-model="ruleForm.checknewpass" placeholder="请再次输入新密码" id='newkey1' type="password" auto-complete="off"></el-input>
						</el-form-item>
					</el-form>
					<div>
						<el-button type="primary" @click="submitForm('ruleFormRef')">重置</el-button>
					</div>

				</el-dialog>
				</div>

			</div>
		</el-form>

	</div>
</template>

<script>
	import { isvalidMobile } from '@/utils/validate'
	import LangSelect from '@/components/LangSelect'
	import SocialSign from './socialsignin'
	import SIdentify from '@/components/identify/identify.vue'
	export default {
		name: 'Login',
		components: {
			LangSelect,
			SocialSign,
			SIdentify
		},

		data() {
			var validatePass2 = (rule, value, callback) => {
				if(value === "") {
					callback(new Error("请再次输入密码"));
				} else if(value !== this.ruleForm.newpass) {
					callback(new Error("两次输入密码不一致!"));
				} else {
					callback();

				}
			}
			const validateMobile = (rule, value, callback) => {
				if(!isvalidMobile(value)) {
					callback(new Error('请输入手机号码'))
				} else {
					callback()
				}
			}
			// 验证码自定义验证规则
			const validateVerifycode = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('请输入验证码'))
				} else if(value !== this.identifyCode) {
					console.log('validateVerifycode:', value)
					callback(new Error('验证码不正确!'))
				} else {
					callback()
				}
			}
			const validatePassword = (rule, value, callback) => {
				if(value.length < 6) {
					callback(new Error('密码不能少于6位'))
				} else {
					callback()
				}
			}
			return {
				rules: {
					pass: [{
						required: true,
						message: "请输入密码"
					}],
					newpass: [{
						required: true,
						message: "请输入新密码"
					}],
					checknewpass: [{
						required: true,
						validator: validatePass2,
						trigger: "blur"
					}]
				},
				loginForm: {
					mobile: '',
					password: '',
					verifycode: ''
				},
				rulenextForm: {
					pass: "",
					newpass: "",
					checknewpass: ""
				},
				ruleForm: {
					phonenumber: "",
					yzm: "",
				
				},
				checked: false,
				identifyCodes: '1234567890zxcvbnmasdfghjklpoiuytrewq',
				identifyCode: '',
				loginRules: {
					mobile: [{
						required: true,
						trigger: 'blur',
						validator: validateMobile
					}],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 6,
							message: '密码长度最少为6位',
							trigger: 'blur'
						}
					],
					verifycode: [{
						required: true,
						trigger: 'blur',
						validator: validateVerifycode
					}]
				},
				passwordType: 'password',
				loading: false,
				showDialog: false,
				showDialognext: false,
				redirect: undefined
			}
		},
		watch: {
			$route: {
				handler: function(route) {
					this.redirect = route.query && route.query.redirect
				},
				immediate: true
			}
		},
		created() {
			// window.addEventListener('hashchange', this.afterQRScan)
		},
		destroyed() {
			// window.removeEventListener('hashchange', this.afterQRScan)
		},

		mounted() {
			// 验证码初始化
			this.identifyCode = ''
			this.makeCode(this.identifyCodes, 4)
		},
		computed: {},
		props: [],
		methods: {

			showPwd() {
				if(this.passwordType === 'password') {
					this.passwordType = ''
				} else {
					this.passwordType = 'password'
				}
			},
			handleLogin() {
				this.$refs.loginForm.validate(valid => {
					if(valid) {
						this.loading = true
						this.$store.dispatch('LoginByMobile', this.loginForm).then(() => {
							this.loading = false
							this.$router.push({
								path: '/'
							})
						}).catch(() => {
							
								this.$message({
									message: '登录失败，请重新确认你的手机号码和密码',
									type: 'error'
								});
							

							this.loading = false
						})
					} else {
						console.log('error submit!!')
						return false
					}
				})
			},



			// 生成随机数
			randomNum(min, max) {
				return Math.floor(Math.random() * (max - min) + min)
			},
			// 切换验证码
			refreshCode() {
				this.identifyCode = ''
				this.makeCode(this.identifyCodes, 4)
			},
			// 生成四位随机验证码
			makeCode(o, l) {
				for(let i = 0; i < l; i++) {
					this.identifyCode += this.identifyCodes[
						this.randomNum(0, this.identifyCodes.length)
					]
				}
				console.log(this.identifyCode)
			}
		}
	}
</script>
<style>
	.login-container
		.showbox .el-dialog {
		background:#2d3a4b;
		text-align: center;
		
	} 
	.el-dialog__title {
    line-height: 24px;
    font-size: 18px;
   color:white;
}
.el-form-item--medium .el-form-item__content, .el-form-item--medium .el-form-item__label {
    color: white;

}

	
</style>
<style rel="stylesheet/scss" lang="scss">
	/* 修复input 背景不协调 和光标变色 */
	/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
	
	$bg:#283443;
	$light_gray:#eee;
	$cursor: #fff;
	@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
		.login-container .el-input input {
			color: $cursor;
			&::first-line {
				color: $light_gray;
			}
		}
	}
	/* reset element-ui css */
	
	.login-container {
		.el-input {
			display: inline-block;
			height: 47px;
			width: 85%;
			input {
				background: transparent;
				border: 0px;
				-webkit-appearance: none;
				border-radius: 0px;
				padding: 12px 5px 12px 0px;
				color: $light_gray;
				height: 47px;
				caret-color: $cursor;
				&:-webkit-autofill {
					-webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
					-webkit-text-fill-color: $cursor !important;
				}
			}
		}
		.el-form-item {
			border: 1px solid rgba(255, 255, 255, 0.1);
			background: rgba(0, 0, 0, 0.1);
			border-radius: 5px;
			color: #454545;
		}
	}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
	$bg:#2d3a4b;
	$dark_gray:#889aa4;
	$light_gray:#eee;
	.login-container {
		min-height: 100%;
		width: 100%;
		background-color: $bg;
		overflow: hidden;
		.login-form {
			position: relative;
			width: 520px;
			max-width: 100%;
			padding: 160px 35px 0;
			margin: 0 auto;
			overflow: hidden;
		}
		.tips {
			font-size: 14px;
			color: #fff;
			margin-bottom: 10px;
			span {
				&:first-of-type {
					margin-right: 16px;
				}
			}
		}
		.svg-container {
			padding: 6px 5px 6px 15px;
			color: $dark_gray;
			vertical-align: middle;
			width: 30px;
			display: inline-block;
		}
		.title-container {
			position: relative;
			.title {
				font-size: 26px;
				color: $light_gray;
				margin: 0px auto 40px auto;
				text-align: center;
				font-weight: bold;
			}
			.set-language {
				color: #fff;
				position: absolute;
				top: 3px;
				font-size: 18px;
				right: 0px;
				cursor: pointer;
			}
		}
		.show-pwd {
			position: absolute;
			right: 10px;
			top: 7px;
			font-size: 16px;
			color: $dark_gray;
			cursor: pointer;
			user-select: none;
		}
		.thirdparty-button {
			position: absolute;
			left: 403px;
		}
		.rememberpassword{
			margin-left:5px;
		}
	}
	
</style>